<!-- 老师标签 -->
<style>
    .teacher-tags-edit{}
    .teacher-tags-edit li{list-style: none; float: left; margin: 8px 12px;}
    .teacher-tags-edit li span{padding: 3px 6px; border: 1px solid #f3bc77;
        border-radius: 5px;}
    .teacher-tags-edit li .fa{cursor: pointer;}
    .teacher-tags-edit .teacher-s-tags li{}
    .teacher-tags-edit .all-tags li{border-color: #0b97c4}
</style>
<script type="text/x-template" id="template-teacher-tags">
<div class="col-md-12 teacher-tags-edit">
    <h4>{{teacher_name}}</h4>
    <div class="col-md-6">
        <div class="form-group col-md-12" style="margin: 5px;">
            <label>手动添加：</label>
            <input class="" v-model="title" placeholder="输入标签……">
            <button type="button" @click="add()">添加</button>
        </div>
        <div class="col-md-12">
            <label>已有标签：</label>
            <ul class="teacher-s-tags">
                <li v-for="t in list">
                    <span>{{t.title}}</span>
                    <a @click="del(t)"><i class="fa fa-minus"></i></a>
                </li>
            </ul>
        </div>
    </div>
    <div class="col-md-6">
        <label>快速添加：</label>
        <ul class="all-tags">
            <li v-for="t in all">
                <span>{{t.title}}</span>
                <a @click="add(t)"><i class="fa fa-plus"></i></a>
            </li>
        </ul>
    </div>
</div>
</script>
<script>
    Vue.component('teacher-tags', {
        template: '#template-teacher-tags',
        props: ['teacher_id','teacher_name'],
        data: function () {
            return {
                list: [],
                all: [],
                title: ''
            }
        },
        created: function () {
            this.getAll();
        },
        methods: {
            getList: function () {
                if (this.teacher_id <= 0) return;
                ajax({
                    uri: '/teachers/tags',
                    data: {teacher_id: this.teacher_id},
                    success: function (resp) {
                        this.list = resp.data;
                    }.bind(this)
                })
            },
            getAll: function () {
                ajax({
                    uri: '/teachers/tags',
                    success: function (resp) {
                        this.all = resp.data;
                    }.bind(this)
                })
            },
            add: function (tag) {
                var newTag = false;
                var data = {teacher_id: this.teacher_id};
                if (tag && tag.id) {
                    var count = 0;
                    this.list.forEach(function (t, i) {
                        if (t.id === tag.id) count++;
                    });
                    if (count > 0) return;

                    data.tag_id = tag.id;
                    newTag = false;
                } else {
                    data.tag = this.title;
                    newTag = true;
                }
                ajax({
                    uri: '/teachers/tag_add',
                    data: data,
                    success: function (resp) {
                        var tag = resp.data;
                        this.getList();
                        if (newTag) {
                            this.title = '';
                            this.getAll();
                        }
                    }.bind(this)
                })
            },
            del: function (tag) {
                var data = {teacher_id: this.teacher_id};
                data.tag_id = tag.id;
                ajax({
                    uri: '/teachers/tag_remove',
                    data: data,
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                })
            }
        },
        watch: {
            teacher_id: function (nv, ov) {
                this.getList();
            }
        }
    });
</script>

<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        管理
        <small>列表</small>
    </h1>
</section>

<!-- Main content -->
<section class="content" id="teachers-app">
    <div class="row" v-show="show.table">
        <div class="col-md-12">
            <table class="table table-responsive table-striped table-bordered">
                <thead>
                <tr>
                    <td colspan="100">
                        <a class="btn btn-default" @click="getList">刷新</a>
                        <a class="btn btn-info" @click="add">添加</a>
                        <a class="btn btn-default" @click="showItem('table')">关闭</a>
                    </td>
                </tr>
                <tr>
                    <th>ID</th>
                    <th>用户名</th>
                    <th>姓名</th>
                    <th>头像</th>
                    <th>性别</th>
                    <th>关注数(实际/运营)</th>
                    <th>排序</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list">
                    <td>{{item.id}}</td>
                    <td>{{item.username}}</td>
                    <td>{{item.realname}}</td>
                    <td>
                        <a class="avatar" :href="item.avatar" target="_blank">
                            <img :src="item.avatar + '?x-oss-process=image/resize,h_64'">
                        </a>
                    </td>
                    <td>{{item.gender | Gender}}</td>
                    <td>{{item.num_followed}} / {{item.followed}}</td>
                    <td>{{item.rank}}</td>
                    <td>
                        <a class="btn btn-info btn-xs" @click="edit(item)">编辑</a>

                        <a class="btn btn-default btn-xs" @click="editTag(item)">标签</a>

                        <span v-if="!item.hide">
                            <a v-if="!item.recommend" class="btn btn-info btn-xs" @click="recommend(item)">添加推荐</a>
                            <a v-if="item.recommend" class="btn btn-warning btn-xs" @click="recommend(item)">取消推荐</a>
                        </span>

                        <a v-if="item.hide" class="btn btn-info btn-xs" @click="hide(item)">上架</a>
                        <a v-if="!item.hide" class="btn btn-warning btn-xs" @click="hide(item)">下架</a>

                        <a v-if="!item.hide" class="btn btn-info btn-xs" @click="positionAdd(item)">内容推荐</a>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="100">
                        <pagination :total="page.total" :limit="page.limit" :offset="page.offset" @turn="turnPage" ></pagination>
                    </td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <div class="row" v-if="show.edit">
        <div class="col-md-4 col-md-offset-2">
            <h3>编辑</h3>
            <div class="form" role="form">
                <div class="form-group has-warning">
                    <label>登录用户名</label>
                    <input class="form-control" v-model="edit_item.username">
                </div>
                <div class="form-group has-warning">
                    <label>登录密码</label>
                    <input class="form-control" v-model="edit_item.password">
                </div>
                <div class="form-group has-warning">
                    <label>姓名</label>
                    <input class="form-control" v-model="edit_item.realname">
                </div>
                <div class="form-group has-warning">
                    <label>头像</label>
                    <file-uploader v-model="edit_item.avatar" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>
                <div class="form-group has-warning">
                    <label>PC列表图片</label>
                    <file-uploader v-model="edit_item.list_img" filetype="image" oss="true" policyUrl="/alioss/get_policy"></file-uploader>
                </div>
                <div class="form-group">
                    <label>付费问答（积分）</label>
                    <input class="form-control" v-model="edit_item.config.ask_credit" type="number" step="1" min="0">
                </div>
                <div class="form-group">
                    <label>成功率</label>
                    <input class="form-control" v-model="edit_item.success_rate">
                </div>
                <div class="form-group">
                    <label>资格证号</label>
                    <input class="form-control" v-model="edit_item.qualification_certificate">
                </div>
                <div class="form-group has-warning">
                    <label>性别</label>
                    <label><input type="radio" v-model="edit_item.gender" value="1" name="gender">男</label>
                    <label><input type="radio" v-model="edit_item.gender" value="2" name="gender">女</label>
                </div>
                <div class="form-group">
                    <label>等级</label>
                    <select class="form-control" v-model="edit_item.degree_id">
                        <option v-for="d in degrees" :value="d.id">{{d.name}}</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>介绍</label>
                    <textarea class="form-control" v-model="edit_item.intro" rows="6" style="resize: vertical"></textarea>
                </div>

                <div class="form-group">
                    <label>排序（升序）：</label>
                    <input class="form-control" type="number" min="1" step="1" v-model="edit_item.rank">
                </div>

                <div class="form-group">
                    <label>推荐（在首页推荐里显示）：</label>
                    <input  type="checkbox" v-model="edit_item.recommend">
                </div>

                <div class="form-group">
                    <label>关注数：</label>
                    <input class="form-control" v-model="edit_item.followed">
                </div>

                <div class="form-group">
                    <a class="btn btn-primary" @click="save">保存</a>
                    <a class="btn btn-default" @click="showItem('table')">关闭</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" v-show="show.tags">
        <div class="col-md-8 col-md-offset-2">
            <a class="btn btn-warning" @click="showItem('table')">关闭</a>
            <teacher-tags :teacher_id="edit_tag.id" :teacher_name="edit_tag.realname"></teacher-tags>
        </div>
    </div>

    <!--内容推荐-->
    <div class="row" v-show="show.position">
        <div class="box-header">
            <h3>内容推荐</h3>
        </div>
        <div class="box-body">
            <position-add v-model="positionData" :item_type="5" item_url="/master/detail/" ref="positionModal"></position-add>
        </div>
        <div class="box-footer">
            <button type="button" class="btn btn-primary pull-right" @click="positionSave()">推荐</button>
            <button type="button" class="btn btn-default pull-left" @click="show.position=false;show.table=true">取消</button>
        </div>
    </div>
    <!--内容推荐 /-->
</section>
<!-- /.content -->

<script>
    function Teacher() {
        this.config = {ask_credit: 5}
    }

    var teachers_app = new Vue({
        el: '#teachers-app',
        data: {
            list: [],
            edit_item: new Teacher(),
            page: {
                total: 0,
                limit: 10,
                offset: 0
            },
            edit_tag: {},
            degrees: [],
            show: {
                table: true,
                edit: false,
                tags: false,
                position: false,
            },
            positionData: {},
        },
        created: function () {
            this.getList();
            ajax({
                uri: '/teachers/degree_list',
                success: function (resp) {
                    this.degrees = resp.data;
                }.bind(this)
            });
        },
        methods: {
            getList: function () {
                ajax({
                    uri: '/teachers/list',
                    data: this.page,
                    success: function(resp){
                        this.list = resp.list;
                        this.page.total = resp.total;
                    }.bind(this)
                });
            },
            add: function () {
                this.edit_item = new Teacher();
                this.showItem('edit');
            },
            edit: function (item) {
                this.edit_item = item;
                this.showItem('edit');
            },
            save: function () {
                var item = this.edit_item;
                if (!item.username || !item.realname || !item.degree_id || !item.avatar) {
                    alert('请完善资料！');
                    return;
                }

                ajax({
                    uri: '/teachers/save',
                    data: item,
                    success: function(resp){
                        // console.log(resp);
                        this.showItem('table');
                        this.getList();
                    }.bind(this)
                });
            },
            hide: function (item) {
                var hide = item.hide ? 0 : 1;
                ajax({
                    uri: '/teachers/set_hide',
                    data: {id: item.id, hide: hide},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                });
            },
            recommend: function (item) {
                var recommend = item.recommend ? 0 : 1;
                ajax({
                    uri: '/teachers/set_recommend',
                    data: {id: item.id, recommend: recommend},
                    success: function (resp) {
                        this.getList();
                    }.bind(this)
                });
            },
            editTag: function (item) {
                this.edit_tag = item;
                this.showItem('tags')
            },
            turnPage: function (offset) {
                this.page.offset = offset;
            },
            setIntro: function (intro) {
                this.edit_item.intro = intro;
            },
            showItem: function (item) {
                for (var p in this.show) {
                    this.show[p] = p === item;
                }
            },

            /* 内容推荐 */
            positionAdd: function (item) {
                let self = this;
                this.positionData = {
                    itemId: item.id,
                    itemTitle: item.realname,
                    itemImg: item.list_img?item.list_img:item.avatar
                };

                this.showItem('position');
                setTimeout(function () {
                    self.$refs.positionModal.loadData(self.positionData);
                }, 50);
            },
            positionSave: function () {
                let self = this;
                self.$refs.positionModal.save(function () {
                    self.showItem('table');
                });
            }
            /* 内容推荐 end */
        },
        filters: {
            Gender: function (g) {
                return g == 1 ? '男' : (g == 2 ? '女' : '');
            }
        },
        watch: {
            'page.offset': function (nv, ov) {
                this.getList();
            }
        }
    });
</script>